<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="sheng">
    <option value="-1">请选择省份</option>
    <!--    <option value="湖南省">湖南省</option>-->
    <!--    <option value="广东省">广东省</option>-->
</select>
<select id="shi">
    <option value="-1">请选择城市</option>
    <!--    <option value="衡阳市">衡阳市</option>-->
    <!--    <option value="岳阳市">岳阳市</option>-->
    <!--    <option value="广州市">广州市</option>-->
    <!--    <option value="湛江市">湛江市</option>-->
</select>
<select id="qu">
    <option value="-1">请选择县区</option>
    <!--    <option value="高新区">高新区</option>-->
    <!--    <option value="白云区">白云区</option>-->
    <!--    <option value="天河区">天河区</option>-->
    <!--    <option value="赤坎区">赤坎区</option>-->
    <!--    <option value="霞山区">霞山区</option>-->
</select>
<script src="../js/cities.js"></script>
<script>
    let selectSheng = document.querySelector("#sheng");
    let selectShi = document.querySelector("#shi");
    let selectQu = document.querySelector("#qu");

    function searchDeep(array, target) {
        return array.find(item => {
            if (item.value == target) {
                console.log(item);
                return item;
            }
            if (item.children) {
                searchDeep(item.children, target);
            }
        });
    }

    let sheng = select_(position, selectSheng, selectShi);
    console.log(sheng);
    // select_(sheng.children, selectShi, selectQu);

    // position.forEach(function (value, index) {
    //     // console.log(value);
    //     let opt = document.createElement("option");
    //     opt.value = value.value;
    //     opt.text = value.label;
    //     selectSheng.add(opt);
    // });

    // let sheng;//保存当前选中的省
    // selectSheng.onchange = function (event) {
    //     let selectedOpt = event.target.item(event.target.selectedIndex);
    //     while (selectShi.hasChildNodes()) {
    //         selectShi.firstChild.remove();
    //     }
    //     selectShi.innerHTML = "<option value='-1.txt'>请选择城市</option>";
    //     sheng = searchDeep(position, selectedOpt.value);
    //     console.log(shi);
    //     sheng.children.forEach(value => {
    //         let opt = document.createElement("option");
    //         opt.value = value.value;
    //         opt.text = value.label;
    //         selectShi.add(opt);
    //     });
    // }
    //
    // let shi;//保存当前选中的市
    // selectShi.onchange = function (event) {
    //     let selectedOpt = event.target.item(event.target.selectedIndex);
    //     while (selectQu.hasChildNodes()) {
    //         selectQu.firstChild.remove();
    //     }
    //     shi = searchDeep(sheng.children, selectedOpt.value);
    //     selectQu.innerHTML = "<option value='-1.txt'>请选择县区</option>";
    //     // console.log(position.filter(value => {
    //     //     console.log(value, selectedOpt.value);
    //     //     return value.value == selectedOpt.value
    //     // }));
    //     shi.children.forEach(value => {
    //         let opt = document.createElement("option");
    //         opt.value = value.value;
    //         opt.text = value.label;
    //         selectQu.add(opt);
    //     })
    // }

    function select_(array, preSelect, nextSelect) {
        array.forEach(function (value, index) {
            // console.log(value);
            let opt = document.createElement("option");
            opt.value = value.value;
            opt.text = value.label;
            preSelect.add(opt);
        });
        let curItem;//保存当前选中的记录
        preSelect.onchange = function (event) {
            let selectedOpt = event.target.item(event.target.selectedIndex);
            while (nextSelect.hasChildNodes()) {
                nextSelect.firstChild.remove();
            }
            curItem = searchDeep(array, selectedOpt.value);
            nextSelect.innerHTML = "<option value='-1'>请选择县区</option>";
            // console.log(position.filter(value => {
            //     console.log(value, selectedOpt.value);
            //     return value.value == selectedOpt.value
            // }));
            curItem.children.forEach(value => {
                let opt = document.createElement("option");
                opt.value = value.value;
                opt.text = value.label;
                nextSelect.add(opt);
            })
        }

        return curItem;
    }
</script>
</body>
</html>